import { useState } from 'react'
import { Layout, Menu, Dropdown, Avatar, message } from 'antd'
import { 
  UserOutlined,
  PictureOutlined,
  MessageOutlined,
  ReadOutlined,
  LogoutOutlined,
  SettingOutlined
} from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
import UserManagement from './UserManagement'
import ImageManagement from './ImageManagement'
import FeedbackManagement from './FeedbackManagement'
import NewsManagement from './NewsManagement'

const { Sider, Content, Header } = Layout

// 定义菜单项类型
type MenuItem = {
  key: string
  icon: React.ReactNode
  label: string
  component: React.ReactNode
}

export default function AdminDashboard() {
  const navigate = useNavigate()
  // 定义菜单项和对应组件
  const menuItems: MenuItem[] = [
    {
      key: '1',
      icon: <UserOutlined />,
      label: '用户管理',
      component: <UserManagement />
    },
    {
      key: '2',
      icon: <PictureOutlined />,
      label: '图片管理',
      component: <ImageManagement />
    },
    {
      key: '3',
      icon: <MessageOutlined />,
      label: '反馈管理',
      component: <FeedbackManagement />
    },
    {
      key: '4',
      icon: <ReadOutlined />,
      label: '新闻资讯',
      component: <NewsManagement />
    }
  ]

  // 当前选中的菜单项
  const [selectedKey, setSelectedKey] = useState('1')

  // 获取当前显示的组件
  const currentComponent = menuItems.find(item => item.key === selectedKey)?.component

  // 退出登录
  const handleLogout = () => {
    // 这里可以添加退出登录的逻辑，比如清除token等
    message.success('已退出登录')
    navigate('/admin/login')
  }

  // 用户下拉菜单
  const userMenu = (
    <Menu>
      <Menu.Item key="settings" icon={<SettingOutlined />}>
        个人设置
      </Menu.Item>
      <Menu.Item key="logout" icon={<LogoutOutlined />} onClick={handleLogout}>
        退出登录
      </Menu.Item>
    </Menu>
  )

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider 
        width={220} 
        theme="dark" 
        style={{ 
          boxShadow: '2px 0 8px 0 rgba(29, 35, 41, 0.1)',
          background: '#001529',
        }}
      >
        <div style={{ 
          padding: '16px', 
          textAlign: 'center', 
          borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
          background: '#002140'
        }}>
          <h2 style={{ 
            margin: 0,
            color: 'rgba(255, 255, 255, 0.9)',
            fontSize: '18px',
            fontWeight: '600'
          }}>凯泽利后台</h2>
        </div>
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={[selectedKey]}
          onClick={({ key }) => setSelectedKey(key)}
          items={menuItems.map(item => ({
            key: item.key,
            icon: item.icon,
            label: item.label
          }))}
          style={{ 
            background: '#001529',
            borderRight: 0,
            padding: '8px 0'
          }}
        />
      </Sider>
      <Layout>
        <Header style={{ 
          background: '#fff',
          padding: '0 24px',
          display: 'flex',
          justifyContent: 'flex-end',
          alignItems: 'center',
          boxShadow: '0 1px 4px rgba(0, 21, 41, 0.08)'
        }}>
          <Dropdown overlay={userMenu} placement="bottomRight">
            <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
              <Avatar icon={<UserOutlined />} style={{ marginRight: 8 }} />
              <span>管理员</span>
            </div>
          </Dropdown>
        </Header>
        <Content style={{ padding: '24px', background: '#f5f7fa' }}>
          <div style={{ 
            background: '#fff', 
            padding: '24px', 
            minHeight: 'calc(100vh - 112px)', 
            borderRadius: '4px',
            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.03)'
          }}>
            {currentComponent}
          </div>
        </Content>
      </Layout>
    </Layout>
  )
}